body {
    margin: 0;
    line-height: normal;
}

:root {
    /* fonts */
    --paragraph-03: "SF Pro Display";
    --font-varela-round: "Varela Round";

    /* font sizes */
    --paragraph-03-size: 14px;
    --font-size-base: 16px;
    --font-size-xl: 20px;
    --font-size-lg: 18px;

    /* Colors */
    --white: #fff;
    --blue-100: #156cf7;
    --color-dimgray: #666;
    --color-darkslategray-100: #36383b;
    --black-80: #333;
    --black-20: #ccc;
    --black-40: #999;
    --blue-5: #f3f8ff;
    --colors-black-100: #000;
    --blue-80: #4489f9;
    --color-darkorange: #f78f15;

    /* Gaps */
    --gap-5xs: 8px;
    --gap-xs: 12px;
    --gap-base: 16px;

    /* Paddings */
    --padding-5xl: 24px;
    --padding-sm: 14px;
    --padding-base: 16px;
    --padding-xl: 20px;
    --padding-xs: 12px;
    --padding-3xs: 10px;

    /* Border radiuses */
    --br-xl: 20px;
    --br-9xs: 4px;
    --br-5xs: 8px;
    --br-11xl: 30px;
}